<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>数据验证</title>
    </head>
    <body>

        <div id="root"></div>

        <!-- 导入 vue.js 3.x 核心库 -->
        <script src="../scripts/vue@3.2.31.js"></script>

        <script>

            let Person = {
                name: 'Person',
                props: {
                    id: {
                        type: Number,
                        default: 1 ,
                        required: false
                    },
                    name: String,
                    gender: {
                        type: String,
                        default: '男'
                    },
                    password: {
                        type: String,
                        required: true,
                        validator: function(value){
                            return value.length > 5 ;
                        }
                    }
                },
                template: `<div>
                              <span>{{ id }}</span>
                              <span>{{ name }}</span>
                              <span>{{ gender }}</span>
                           </div>`
            }

            let options = {
                data(){
                    return { id: 123 }
                },
                components: {
                    'person': Person
                },
                template: `<div>
                               <person :id="id" name="张翠山" gender="男" password="abc123"></person>
                               <person name="殷素素" gender="女" password="123abc"></person>
                           </div>`,
            }
            const app = Vue.createApp(options);
            const root = app.mount('#root');
            console.log( root );
        </script>
        
    </body>
</html>